<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="showPost();">我要发帖</span></header>
    <section>
        <ul id="postList">
            <li>
                <div><img src="images/tou02.jpg"></div>
                <h1>ggggg</h1>
                <p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
            </li>
            <li>
                <div><img src="images/tou01.jpg"></div>
                <h1>ddddd</h1>
                <p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
            </li>
        </ul>
    </section>

    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select >
        <option selected>请选择版块</option>
        <option>电子书籍</option>
        <option>新课来了</option>
        <option>新手报到</option>
        <option>职业规划</option>
    </select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="doPost()">
    </div>
</div>

<script>
    var postFlag = false;

    function showPost() {
        if (postFlag == false) {
            var d = document.getElementsByClassName("post")[0].style.display = "block";
            postFlag = true;
        } else if (postFlag == true) {
            var d = document.getElementsByClassName("post")[0].style.display = "none";
            postFlag = false;
        }
        clear();
    }

    function clear() {
        document.getElementsByClassName("title")[0].value="";
        document.getElementsByClassName("content")[0].value="";
        //document.getElementsByTagName("select")[0].value="";
        document.getElementsByTagName("select")[0].selectedIndex=0;

    }

    function doPost() {
        //1:拿到输入的值:
        var title = document.getElementsByClassName("title")[0].value;
        var section = document.getElementsByTagName("select")[0].value;
        var content = document.getElementsByClassName("content")[0].value;
        // alert(title+section+content);

        //2:随机数0-4
        var touXiangImg=parseInt(Math.random()*4)+1;
        //alert(touXiangImg);
        var dataInfo=new Date().toLocaleString();

        //3:创建元素加进去
        var li=document.createElement("li");
        var div=document.createElement("div");
        var img=document.createElement("img");
        var h1=document.createElement("h1");
        var p=document.createElement("p");
        var span1=document.createElement("span");
        var span2=document.createElement("span");

       img.setAttribute("src","images/tou0"+touXiangImg+".jpg");
       div.appendChild(img);
       h1.innerHTML=title;
       //span1
        span1.innerHTML="版块："+section;
        p.appendChild(span1);
       //span2
        span2.innerHTML="发表时间："+dataInfo;
        p.appendChild(span2);
        //装填li
        li.appendChild(div);
        li.appendChild(h1);
        li.appendChild(p);

        document.getElementById("postList").appendChild(li);
        showPost();
        //document.getElementsByClassName("post")[0].style.display = "none";

    }
    function doPost2() {
        //1:拿到输入的值:
        var title = document.getElementsByClassName("title")[0].value;
        var section = document.getElementsByTagName("select")[0].value;
        var content = document.getElementsByClassName("content")[0].value;
        // alert(title+section+content);

        //2:随机数0-4
        var touXiangImg=parseInt(Math.random()*4)+1;
        //alert(touXiangImg);
        var dataInfo=new Date().toLocaleString();

       document.getElementsByTagName("li")[0].innerHTML="";

        document.getElementById("postList").appendChild(li);
        showPost();
        //document.getElementsByClassName("post")[0].style.display = "none";

    }

</script>

</body>
</html>